<template>
    <div class="product-management">
        <h2 style="color: white;">商品信息管理</h2>
        <div class="search-area">
            <a-input v-model:value="searchQuery.id" placeholder="ID" class="search-input" />
            <a-input v-model:value="searchQuery.name" placeholder="商品名" class="search-input" />
            <a-input v-model:value="searchQuery.business" placeholder="商家" class="search-input" />
            <a-button type="primary" @click="handleSearch">搜索</a-button>
        </div>
        <table class="product-table">
            <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品库存</th>
                    <th>商家</th>
                    <th>商品简述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <ProductRow v-for="product in products" :key="product.id" :product="product" @deleted="fetchProducts" />
            </tbody>
        </table>
    </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import ProductRow from './ProdRow.vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';

export default {
    name: 'AllProdManager',
    components: {
        ProductRow,
    },
    setup() {
        
        const searchQuery = ref({
            id: '',
            name: '',
            business: '',
        });

        const products = ref([]);

        onMounted(() => {
            fetchProducts();
        })
        
        const handleSearch = () => {
            request.post('/product/search', {
                prodid: searchQuery.value.id,
                prodname: searchQuery.value.name,
                busname: searchQuery.value.business,
            }).then(res => {
                const pl = res.data.pl;
                const bl = res.data.bl;
                products.value = pl.map((p, i) => ({
                    ...p,
                    busName: bl[i]
                }));
            }).catch(err => {
                message.error("搜索失败：", err);
            });
        }

        const fetchProducts = () => {
            request.get('/product/getAll').then(res => {
                const pl = res.data.pl;
                const bl = res.data.bl;
                products.value = pl.map((p, i) => ({
                    ...p,
                    busName: bl[i]
                }));
            }).catch(err => {
                message.error("获取产品列表失败：", err);
            })
        }

        return {
            products,
            searchQuery,
            handleSearch,
            fetchProducts,
        };
    },
};
</script>

<style scoped>
.product-management {
    padding: 24px;
    background: #1a1a1a;
    /* 暗色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    /* 字体颜色为白色 */
}

.product-table {
    width: 100%;
    border-collapse: collapse;
}

.search-area {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.search-input {
    width: 200px;
}

.product-table th,
.product-table td {
    padding: 12px;
    border: 1px solid #ffffff;
    text-align: left;
}

.product-table th {
    background: rgba(255, 255, 255, 0.1);
    /* 微透明背景 */
}
</style>